<template>
    <div class="tableLeft">
        <my-button type="primary" size="mini" icon="el-icon-circle-plus-outline" plain style="margin:20px 0"
            @btnClick="handleEvent({type:'add',active:activeName})">添加提醒通知
        </my-button>
        <el-table :data="tableData" border style="width: 100%;"
            :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
            :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}" v-loading="loading"
            element-loading-text="加载中" element-loading-background="rgba(250, 250, 250, 0.5)"
            element-loading-spinner="el-icon-loading" ref="tabList">
            <el-table-column label="序号" width="80">
                <template slot-scope="scope">
                    <span>{{scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="delayTime" label="时间(分钟)">
            </el-table-column>
            <el-table-column prop="infoUserName" label="通知到人员" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="infoTypeName" label="通知方式" show-overflow-tooltip>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                        <i class="el-icon-edit" style="cursor: pointer;color:#409EFF;margin-right:25px"
                            @click="handleEvent({type:'edit',active:activeName,row:scope.row})"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                        <i class="el-icon-close" style="cursor: pointer;color:#409EFF" @click="delInfo(scope.row.id)"></i>
                    </el-tooltip>
                </template>
            </el-table-column>
            <div slot="empty">
                <el-empty :image-size="100"></el-empty>
            </div>
        </el-table>
        
        <!-- 故障提醒 -->
        <trafficDialog ref="trafficDialog" @updateList='updateList' :searchForm='searchForm'></trafficDialog>
    </div>
</template>

<script>
    import {
        noticeList,
        delNotice
    } from '@/api/exceptionController'
    import trafficDialog from './trafficDialog.vue'
    export default {
        data() {
            return {
                tableData: [],
                loading: false,
            }
        },
        props:{
            activeName:{
                type:String,
                default:'0'
            },
            searchForm: {
                type: Object,
                default: () => ({})
            }
        },
        components:{
            trafficDialog
        },
        methods:{
            //获取异常类型列表
            getNoticeList: async function (data) {
                this.loading = true
                const res = await noticeList(data)
                if (res.code == 200) {
                    this.tableData = res.data
                }
                this.loading = false
            },
            handleEvent(payload){
                this.$nextTick(() => {
                    this.$refs.trafficDialog.open(payload)
                })
            },
            delNoticeFn(data) {
                delNotice(data).then(res => {
                    if (res.code == 200) {
                        this.getNoticeList(this.searchForm)
                        this.utils.showMsg('删除成功', 'success')
                    }
                })
            },
            //更新异常列表
            updateList(){
                this.getNoticeList(this.searchForm)
            },
            //删除 
            delInfo(ids) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass:'messagebox',
                    confirmButtonClass:'dangerBtn',
                    type: 'warning'
                    }).then(() => {
                        this.delNoticeFn({ids})
                    }).catch(() => {
                })
            },
        }
    }
</script>

<style lang="less" scoped>

</style>